<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>scrolling_test.html</title>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot');
    goog.require('bot.action');
    goog.require('bot.dom');
    goog.require('goog.events');
    goog.require('goog.testing.jsunit');
    goog.require('goog.userAgent');
    goog.require('goog.userAgent.product');
  </script>
</head>
<body>
  <script type="text/javascript">
    var findElement = bot.locators.findElement;
    var topLeft = new goog.math.Coordinate(0, 0);

    function testOffscreenIsNotInView() {
      var element = findElement({id: 'offscreen'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testOffscreenIsNotInViewWithOffset() {
      var element = findElement({id: 'offscreen'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }

    function testOnScreenIsInView() {
      var element = findElement({id: 'onscreen'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertTrue(inView);
    }

    function testOnScreenIsInViewWithOffset() {
      var element = findElement({id: 'onscreen'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertTrue(inView);
    }

    function testHiddenByScrollableOverflowIsNotInView() {
      var element = findElement({id: 'scrollable'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testHiddenByScrollableOverflowIsNotInViewWithOffset() {
      var element = findElement({id: 'scrollable'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }


    function testNotHiddenByOverflowIsInView() {
      var element = findElement({id: 'scrollable-in-view'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertTrue(inView);
    }

    function testNotHiddenByOverflowIsInViewWithOffset() {
      var element = findElement({id: 'scrollable-in-view'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertTrue(inView);
    }

    function testHiddenByOverflowIsNotInView() {
      var element = findElement({id: 'scrollable'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testHiddenByOverflowIsNotInViewWithOffset() {
      var element = findElement({id: 'scrollable'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }

    function testHiddenByOverflowIsNotInView() {
      var element = findElement({id: 'hidden-by-overflow'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testHiddenByOverflowIsNotInViewWithOffset() {
      var element = findElement({id: 'hidden-by-overflow'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }

    function testHiddenByNestedScrollContainersIsNotInView() {
      var element = findElement({id: 'nested'});
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testHiddenByNestedScrollContainersIsNotInViewWithOffset() {
      var element = findElement({id: 'nested'});
      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }

    function testHiddenByIframeIsNotInView() {
      var iframe = findElement({id: 'scrollable-iframe'});
      var frameDocument = iframe.contentWindow.document;
      var element = findElement({id: 'iframe-scrollable'}, frameDocument);

      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testHiddenByIframeIsNotInViewWithOffset() {
      var iframe = findElement({id: 'scrollable-iframe'});
      var frameDocument = iframe.contentWindow.document;
      var element = findElement({id: 'iframe-scrollable'}, frameDocument);

      var inView = bot.dom.isScrolledIntoView(element, topLeft);
      assertFalse(inView);
    }

    function testOffscreenInIframeIsNotInView() {
      var iframe = findElement({id: 'offscreen-in-view-iframe'});
      var frameDocument = iframe.contentWindow.document;
      var element = findElement({id: 'in-offscreen-in-view-iframe'}, frameDocument);
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }

    function testNestedIframeWhereMiddleNeedsScrollingIsNotInView() {
      var iframe = findElement({id: 'nested-iframe-parent'});
      var frameDocument = iframe.contentWindow.document;
      var innerIframe = findElement({id: 'middle'}, frameDocument);
      var innerDocument = innerIframe.contentWindow.document;
      var element = findElement({id: 'in-offscreen-in-view-iframe'}, innerDocument);
      var inView = bot.dom.isScrolledIntoView(element);
      assertFalse(inView);
    }
  </script>
  <div style="position: absolute; left: 150px; top: 100px; border: 2px yellow solid;"><a id="onscreen">Onscreen</a></div>
  <div style="position: absolute; left: 3000px; border: 2px orange solid;"><a id="offscreen">Offscreen</a></div>
  <div style="overflow: hidden; width: 50px; height: 30px; border: 2px blue solid;" id="hidden-by-overflow-container">
    <a style="margin-left: 100px;" id="hidden-by-overflow">Hidden</a></div>
  </div>
  <div id="scrollable-container" style="overflow: scroll; width: 100px; height: 100px; border: 2px purple solid;">
    <a id="scrollable" style="margin-left: 150px;">Scrollable</a>
  </div>
  <div id="scrollable-in-view-container" style="overflow: scroll; width: 200px;
    height: 50px; border: 2px grey solid;">&nbsp;&nbsp;&nbsp;<a
      id="scrollable-in-view">Scrollable&nbsp;in&nbsp;view</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </div>
  <div id="scrollable-in-view-container2" style="overflow: scroll; width: 200px;
    height: 50px; border: 2px grey solid;">&nbsp;&nbsp;&nbsp;<a
      id="scrollable-in-view2">Scrollable&nbsp;in&nbsp;view</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </div>
  <div style="overflow: hidden; width: 100px; height: 30px; border: 2px black solid;" id="not-hidden-by-hidden-overflow-container">&nbsp;&nbsp;&nbsp;<a id="not-hidden-by-hidden-overflow">Not hidden</a></div>
  <div style="overflow: scroll; width: 100px; height: 100px;" id="nested-top-container">
    <div style="overflow: scroll; width: 150px; left: 150px; margin-left:
      200px;" id="nested-inner-container"><a id="nested" style="margin-left: 200px;">Nested</a></div>
  </div>

  <div id="scrollable-but-unscrolled-top-container" style="overflow: scroll;
    width: 150px; height: 100px; border: 2px cyan solid;">
    <div id="scrollable-but-unscrolled-middle-container" style="overflow:
      scroll; width: 100px; height: 50px; border: 2px green solid; margin-left:
      200px">&nbsp;&nbsp;&nbsp;<a style="margin-right: 200px;"
        id="scrollable-but-unscrolled-not-hidden">X</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
  </div>

  <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="scrollable-iframe"></iframe>
  <iframe src="testdata/nested_scrolling_iframe_parent.html" style="width: 200px; height: 200px;" id="nested-iframe-parent"></iframe>
  <div style="position: absolute; left: 3000px; top: 200px; border: 2px orange solid;">
    <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="offscreen-scrollable-iframe"></iframe>
  </div>
  <div style="position: absolute; left: 3000px; top: 500px; border: 2px red solid;">
    <iframe src="testdata/simple.html" style="width: 200px; height: 100px;" id="offscreen-in-view-iframe"></iframe>
  </div>
</body>
</html>
